<template>
	<view class="page-body">
		<!-- 页面内容开始 -->

		<!-- 自定义按钮区域开始 -->
		<view>
			<el-row>
				<el-button type="success" size="small" icon="el-icon-circle-plus-outline" @click="addBtn">添加</el-button>
			</el-row>
		</view>
		<!-- 自定义按钮区域结束 -->

		<!-- 表格组件开始 -->
		<vk-data-table ref="table1" :action="table1.action" :columns="table1.columns"
			:right-btns="['detail_auto','update','delete']" :selection="false" :row-no="false" :pagination="true"
			@update="updateBtn" @delete="deleteBtn" @current-change="currentChange" @selection-change="selectionChange">
		</vk-data-table>
		<!-- 表格组件结束 -->


		<el-dialog title="微信商户号支付配置" :visible.sync="dialogVisible" width="50%" :close-on-click-modal="false">

			<el-form ref="form" label-width="110px">
				
				<el-form-item label="PID:">
					<el-input v-model="mpweixin.pid" placeholder="请输入pid" :disabled="true"></el-input>
				</el-form-item>
                <el-form-item label="AppKey:">
                	<el-input v-model="mpweixin.AppKey" placeholder="请输入AppKey" ></el-input>
                </el-form-item>
				<el-form-item label="OfferID:">
					<el-input v-model="mpweixin.OfferID" placeholder="请输入OfferID" ></el-input>
				</el-form-item>
				<el-form-item label="小程序appId:">
					<el-input v-model="mpweixin.appId" placeholder="请输入appId"></el-input>
				</el-form-item>

				<el-form-item label="小程序secret:">
					<el-input v-model="mpweixin.secret" placeholder="请输入secret"></el-input>
				</el-form-item>

				<el-form-item label="微信商户号:">
					<el-input v-model="mpweixin.mchId" placeholder="请输入mchId"></el-input>
				</el-form-item>

				<el-form-item label="apiv2秘钥:">
					<el-input v-model="mpweixin.key" placeholder="请输入key"></el-input>
				</el-form-item>

				<el-form-item label="退款证书:">
					<el-input v-model="mpweixin.pfx" placeholder="请输入退款证书" type="textarea" :rows="8"></el-input>
					<html><a target="_blank"
							href="https://vkunicloud.fsq.pub/admin/#/pages_template/components/form/form-pay-cert">p12证书转文本工具(访问出错时刷新一次即可)</a>
					</html>
				</el-form-item>

				<el-form-item label="备注:">
					<el-input v-model="mpweixin.notes" placeholder="请输入备注"></el-input>
				</el-form-item>

			</el-form>

			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="updatePayConfig">确 定</el-button>
			</span>
		</el-dialog>


		<!-- 页面内容结束 -->
	</view>
</template>

<script>
	var that; // 当前页面对象
	var vk = uni.vk; // vk实例
	var originalForms = {}; // 表单初始化数据

	export default {
		data() {
			// 页面数据变量
			return {
				dialogVisible: false,
				mpweixin: {
					AppKey: "",
					OfferID: "",
					pid: "",
					appId: "",
					secret: "",
					mchId: "",
					key: "",
					pfx: "",
					notes: ""
				},
				// 页面是否请求中或加载中
				loading: false,
				// init请求返回的数据
				data: {

				},
				// 表格相关开始 -----------------------------------------------------------
				table1: {
					// 表格数据请求地址
					action: "admin/system/payConfig/kh/getList",
					// 表格字段显示规则
					columns: [
						{ "key": "_id", "title": "PID", "type": "text", "width": 100 },
						{ "key": "wxpay.mp-weixin.AppKey", "title": "虚拟支付AppKey", "type": "text", "width": 200 },
						{ "key": "wxpay.mp-weixin.OfferID", "title": "虚拟支付OfferID", "type": "text", "width": 200 },
						{ "key": "wxpay.mp-weixin.appId", "title": "小程序appid", "type": "text", "width": 200 },
						{ "key": "wxpay.mp-weixin.secret", "title": "小程序秘钥", "type": "text", "width": 200 },
						{ "key": "wxpay.mp-weixin.mchId", "title": "微信支付商户号", "type": "text", "width": 200 },
						{ "key": "wxpay.mp-weixin.key", "title": "微信支付apiv2秘钥", "type": "text", "width": 200 },
						{ "key": "wxpay.mp-weixin.pfx", "title": "微信支付退款证书", "type": "text", "width": 200 },
						{ "key": "wxpay.mp-weixin.notes", "title": "备注", "type": "text", "width": 200 },
					],
					// 多选框选中的值
					multipleSelection: [],
					// 当前高亮的记录
					selectItem: ""
				},
				// 表格相关结束 -----------------------------------------------------------
				// 其他弹窗表单
				formDatas: {},
				// 表单相关结束 -----------------------------------------------------------
			};
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		onLoad(options = {}) {
			that = this;
			vk = that.vk;
			that.options = options;
			that.init(options);
		},
		// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady() {},
		// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
		onShow() {
			if (vk.vuex.get('$user.userInfo.username') != "admin") {
				vk.navigateToLogin();
			}
		},
		// 监听 - 页面每次【隐藏时】执行(如：返回)
		onHide() {},
		// 函数
		methods: {
			updatePayConfig() {
				if (!this.mpweixin.appId || this.mpweixin.appId.length != 18) {
					this.$message({
						type: 'error',
						message: "appId长度必须为18位，请检查"
					});
					return;
				}

				if (!this.mpweixin.secret || this.mpweixin.secret.length != 32) {
					this.$message({
						type: 'error',
						message: "secret长度必须为32位，请检查"
					});
					return;
				}

				if (!this.mpweixin.mchId || this.mpweixin.mchId.length != 10) {
					this.$message({
						type: 'error',
						message: "mchId长度必须为10位，请检查"
					});
					return;
				}

				if (!this.mpweixin.key || this.mpweixin.key.length != 32) {
					this.$message({
						type: 'error',
						message: "key长度必须为32位，请检查"
					});
					return;
				}

				//去除空格
				this.mpweixin.appId = this.mpweixin.appId.trim();
				this.mpweixin.secret = this.mpweixin.secret.trim();
				this.mpweixin.mchId = this.mpweixin.mchId.trim();
				this.mpweixin.key = this.mpweixin.key.trim();

				if (this.mpweixin.pid) {
					vk.callFunction({
						url: 'admin/system/payConfig/kh/update',
						title: '请求中...',
						data: {
							_id: this.mpweixin.pid,
							mpweixin: this.mpweixin
						},
						success: (data) => {
							console.log("data=", data);
							that.dialogVisible = false;
							that.$refs.table1.refresh();
						}
					});
				} else {
					vk.callFunction({
						url: 'admin/system/payConfig/kh/add',
						title: '请求中...',
						data: {
							mpweixin: this.mpweixin
						},
						success: (data) => {
							console.log("data=", data);
							that.dialogVisible = false;
							that.$refs.table1.refresh();
						}
					});
				}

			},
			// 页面数据初始化函数
			init(options) {

			},
			// 页面跳转
			pageTo(path) {
				vk.navigateTo(path);
			},
			// 刷新
			refresh() {
				that.$refs.table1.refresh();
			},
			// 获取当前选中的行的数据
			getCurrentRow() {
				return that.$refs.table1.getCurrentRow();
			},
			// 监听 - 行的选中高亮事件
			currentChange(val) {
				that.table1.selectItem = val;
			},
			// 当选择项发生变化时会触发该事件
			selectionChange(list) {
				that.table1.multipleSelection = list;
			},
			// 显示添加页面
			addBtn() {
				this.mpweixin = {}
				this.dialogVisible = true;
			},
			// 显示修改页面
			updateBtn({ item }) {
				this.dialogVisible = true;
				this.mpweixin = item.wxpay['mp-weixin'];
				this.mpweixin.pid = item._id;
				console.log("item=", item);
			},
			// 删除按钮
			deleteBtn({ item, deleteFn }) {
				deleteFn({
					action: "admin/system/payConfig/kh/delete",
					data: {
						_id: item._id
					},
				});
			},
		},
	};
</script>
<style lang="scss" scoped>
	.page-body {}
</style>
